import { Avatar, message, Radio } from 'antd';
import React from 'react';
import { t } from '@/locales/i18n';

// @ts-ignore
interface Props extends GridProps {
  list: {
    icon?: string;
    title: string | React.ReactNode;
    desc?: string;
    value: any;
    forbidTip?: string; // If this value is exists, it will be prompted to disable when clicked
  }[];
  iconSize?: string;
  align?: 'top' | 'center';
  value: any;
  hiddenCircle?: boolean;
  className?: string;
  onChange: (e: any) => void;
}

const MyRadio = ({
  list,
  value,
  align = 'center',
  iconSize = '18px',
  hiddenCircle = false,
  className,
  onChange,
  ...props
}: Props) => {
  return (
    <div className={`grid gap-2 ${className}`}>
      {list.map((item) => (
        <div
          className={`relative flex cursor-pointer select-none items-center rounded-md border-[1.5px] border-gray-200 px-4 py-3 ${
            value === item.value
              ? 'border-primary bg-primary-700 text-white'
              : 'bg-gray-100 text-gray-600 hover:border-primary'
          }`}
          key={item.value}
          onClick={() => {
            if (item.forbidTip) {
              message.warning('item.forbidTip');
            } else {
              onChange(item.value);
            }
          }}
        >
          {!hiddenCircle && <Radio checked={value === item.value} />}
          <div className={`${hiddenCircle ? 'pr-0' : 'pr-2'} ml-1 flex-1 self-start`}>
            <div className="text-sm font-bold text-gray-800">
              {typeof item.title === 'string' ? t(item.title as any) : item.title}
            </div>
            {!!item.desc && <div className="text-xs text-[#86909C]">{t(item.desc as any)}</div>}
          </div>
        </div>
      ))}
    </div>
  );
};

export default MyRadio;
